<template>
  <div class="home-box">
    <div class="home-main">
      <div class="home-left">
        <common-function />
        <content-main />
        <news-main />
      </div>
      <div class="home-right">
        <calendar-main />
        <diray-main />
      </div>
    </div>
  </div>
</template>

<script>
  import { defineComponent, toRefs } from 'vue';
  import CommonFunction from '@/views/board-home/components/common-function.vue';
  import ContentMain from '@/views/board-home/components/content-main.vue';
  import NewsMain from '@/views/board-home/components/news-main.vue';
  import CalendarMain from '@/views/board-home/components/calendar-main.vue';
  import DirayMain from '@/views/board-home/components/diray-main.vue';
  import '@/views/board-home/css/index.less';
  export default defineComponent({
    name: 'BoardHome',
    components: { CommonFunction, ContentMain, NewsMain, CalendarMain, DirayMain },
    setup() {
      const state = {};
      return {
        ...toRefs(state),
      };
    },
  });
</script>
<style scoped lang="less">
  .home-box {
    width: 100%;
    height: 100%;
    overflow: auto !important;
    background-color: #f0f2f5;
    .home-main {
      width: 1250px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      padding: 20px 0;
      align-items: stretch;
      .home-left {
        width: 920px;
      }
      .home-right {
        width: 310px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
      }
    }
  }
</style>
